<template>
  <div
    ref="replyComentContent"
    class="comment-input-wrapper"
    style="display: none"
  >
    <el-form
      ref="msgFormRef_"
      :model="msgForm"
      :rules="rules"
      class="msgForm"
    >
      <div
        style="width:100%"
        class="ml-3"
      >
        <el-row>
          <el-col v-bind="columnConfig">
            <div style="width: 100%;display: flex">
              <el-avatar
                shape="circle"
                :size="40"
                :src="msgForm.avatar"
              />
              <el-form-item
                style="width: 90%;margin-left: 5px"
                prop="qq"
              >
                <el-input
                  v-model="msgForm.qq"
                  placeholder="填写QQ号获取头像和昵称"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col v-bind="columnConfig">
            <el-form-item prop="nickName">
              <el-input
                v-model="msgForm.nickName"
                placeholder="昵称"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="columnConfig">
            <el-form-item prop="email">
              <el-input
                v-model="msgForm.email"
                placeholder="邮箱"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="columnConfig">
            <el-form-item>
              <el-input
                v-model="msgForm.targetPath"
                placeholder="http(s)://你的主页"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div style="display:flex">
        <div
          style="width:100%"
          class="ml-3"
        >
          <div class="comment-input">
            <textarea
              v-model="msgForm.content"
              class="comment-textarea"
              placeholder="请输入评论内容..."
              auto-grow
              dense
            />
          </div>
          <!-- 操作按钮 -->
          <div class="emoji-container">
            <div style="width: 122px;margin-left: auto">
              <el-button
                class="upload-btn v-comment-btn"
                size="small"
                style="float: right"
                type="primary"
                plain
                @click="insertComment"
              >
                提交
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import {addMessage} from '@/api'
import {Loading} from 'element-ui'
import axios from 'axios'

export default {
  components: {
  },
  props: {
    articleId:{
      type: Number,
      default: 0
    },
    ownership:{
      type: Number,
      default: 0
    },
  },
  data: function() {
    return {
      index: 0,
      chooseEmoji: false,
      nickname: '',
      columnConfig: {span: 24, xs: 24, sm: 24, lg: 12, xl: 12},
      msgForm:{
        articleId:0,
        ownership: 0,
        avatar:`https://api.multiavatar.com/${new Date().getTime()}.svg`,
        qq:'',
        nickName:'',
        email:'',
        targetPath:'',
        content: '',
        parentId: 0,
        replyNickName: ''
      },
      rules: {
        nickName: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur']}
        ],
        qq: [{
          required: true,
          message: '请输入QQ',
          trigger: 'blur'
        },
        {
          pattern: /^[0-9]+$/,
          message: 'QQ格式有误',
          trigger: ['blur', 'change']
        }
        ]
      }
    }
  },
  methods: {
    cancleReply() {
      this.$refs.replyComentContent.style.display = 'none'
      this.$emit('cancelReply')
    },
    getQqInfo(qq){
      if (!isNaN(qq) && qq !== '') {
        // axios.get('https://api.lixingyong.com/api/qq?id=' + qq).then(res => {
        //   if (res.data.code !== 500) {
        //     this.msgForm.avatar = res.data.avatar
        //     this.msgForm.nickName = res.data.nickname
        //   } else {
        //     this.$notify.error({
        //       title: res.data.msg,
        //     })
        //     this.msgForm.avatar =
        //         'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        //
        //   }
        // })
      } else {
        this.msgForm.avatar =
            'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      }
    },
    insertComment () {
      //判空
      if (this.msgForm.content.trim() === '') {
        this.$toast({type: 'error', message: '评论不能为空'})
        return false
      }
      this.$refs['msgFormRef_'].validate(async (valid) => {
        if (valid) {
          let loadingInstance = this.$loading({fullscreen: true})
          this.msgForm.articleId = this.articleId
          this.msgForm.ownership = this.ownership
          addMessage(this.msgForm).then(res=>{
            let resData = res.data
            if (resData.code === 2000){
              this.$toast({type: 'success', message: '留言成功!等待审核'})
              this.$emit('reloadReply')
              this.msgForm.parentId = 0
              this.msgForm.content = ''
            }
            loadingInstance.close()
          })
        } else {
          this.$toast({type: 'error', message: '请检查表单是否填写完整'})
          return false
        }
      })

    },
    clearForm(){
      this.msgForm = {
        articleId:0,
        ownership: 0,
        avatar:`https://api.multiavatar.com/${new Date().getTime()}.svg`,
        qq:'',
        nickName:'',
        email:'',
        targetPath:'',
        content: '',
        parentId: 0,
        replyNickName: ''
      }
    },
    addEmoji(text) {
      this.commentContent += text
    },

  }
}
</script>

<style scoped>
.reply-input-wrapper {
  border: 1px solid #90939950;
  border-radius: 4px;
  padding: 10px;
  margin: 0 0 10px;
}


.el-input{
  width: 95%;
}

.msgForm >>> .el-input__inner{
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
</style>
